<template>
	<el-dialog title="查看通知记录" v-model="visible" :close-on-click-modal="false" draggable width="75%">
		<div class="relative">
			<div class="absolute top-1 right-1 z-[99]">
				<el-form :inline="false" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
					<el-form-item label="" prop="createTime">
						<el-date-picker
							:end-placeholder="$t('syslog.inputEndPlaceholderTip')"
							:start-placeholder="$t('syslog.inputStartPlaceholderTip')"
							range-separator="至"
							type="datetimerange"
							v-model="state.queryForm.createTime"
							value-format="YYYY-MM-DD HH:mm:ss"
							@change="handleChange"
						/>
					</el-form-item>
				</el-form>
			</div>
			<el-tabs type="border-card" v-model="tab" @tab-change="handleChange">
				<el-tab-pane name="1">
					<template #label>
						<span class="flex items-center">
							<el-icon class="mr-1"><Phone /></el-icon>
							<span>电话通知</span>
						</span>
					</template>

					<el-table
						size="small"
						:height="380"
						:data="state.dataList"
						v-loading="state.loading"
						border
						:cell-style="tableStyle.cellStyle"
						:header-cell-style="tableStyle.headerCellStyle"
						@sort-change="sortChangeHandle"
					>
						<el-table-column type="index" label="序号" width="60" />
						<el-table-column prop="createTime" label="呼叫时间" show-overflow-tooltip />
						<el-table-column prop="receiverId" label="接收号码" show-overflow-tooltip />
						<el-table-column prop="receiverName" label="接警人员" show-overflow-tooltip />
						<el-table-column prop="sendResults" label="通知状态" show-overflow-tooltip>
							<template #default="{ row }">
								<div>
									<el-tag v-if="row.sendResults === 10">默认</el-tag>
									<el-tag v-if="row.sendResults === 20" type="success">发送成功</el-tag>
									<el-tag v-if="row.sendResults === 30" type="danger">失败</el-tag>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="sketch" label="通知结果" :show-overflow-tooltip="{ popperClass: 'max-w-[280px]' }" />
					</el-table>
					<pagination small @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
				</el-tab-pane>
				<el-tab-pane name="2">
					<template #label>
						<span class="flex items-center">
							<el-icon class="mr-1"><Message /></el-icon>
							<span>短信通知</span>
						</span>
					</template>
					<el-table
						size="small"
						:height="380"
						:data="state2.dataList"
						v-loading="state2.loading"
						border
						:cell-style="tableStyle.cellStyle"
						:header-cell-style="tableStyle.headerCellStyle"
						@sort-change="sortChangeHandle2"
					>
						<el-table-column type="index" label="序号" width="60" />
						<el-table-column prop="createTime" label="通知时间" show-overflow-tooltip />
						<el-table-column prop="receiverId" label="接收号码" show-overflow-tooltip />
						<el-table-column prop="receiverName" label="接警人员" show-overflow-tooltip />
						<el-table-column prop="sendResults" label="通知状态" show-overflow-tooltip>
							<template #default="{ row }">
								<div>
									<el-tag v-if="row.sendResults === 10">默认</el-tag>
									<el-tag v-if="row.sendResults === 20" type="success">发送成功</el-tag>
									<el-tag v-if="row.sendResults === 30" type="danger">失败</el-tag>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="sketch" label="通知结果" :show-overflow-tooltip="{ popperClass: 'max-w-[280px]' }" />
					</el-table>
					<pagination small @size-change="sizeChangeHandle2" @current-change="currentChangeHandle2" v-bind="state2.pagination" />
				</el-tab-pane>
				<el-tab-pane name="3">
					<template #label>
						<span class="flex items-center">
							<el-icon class="mr-1"><ChatRound /></el-icon>
							<span>公众号通知</span>
						</span>
					</template>
					<el-table
						size="small"
						:height="380"
						:data="state3.dataList"
						v-loading="state3.loading"
						border
						:cell-style="tableStyle.cellStyle"
						:header-cell-style="tableStyle.headerCellStyle"
						@sort-change="sortChangeHandle3"
					>
						<el-table-column type="index" label="序号" width="60" />
						<el-table-column prop="createTime" label="发送时间" show-overflow-tooltip />
						<el-table-column prop="imei" label="设备IMEI" show-overflow-tooltip />
						<!-- <el-table-column prop="index" label="公众号" show-overflow-tooltip /> -->
						<el-table-column prop="index" label="通知状态" show-overflow-tooltip>
							<template #default="{ row }">
								<div>
									<el-tag v-if="row.sendResults === 10">默认</el-tag>
									<el-tag v-if="row.sendResults === 20" type="success">发送成功</el-tag>
									<el-tag v-if="row.sendResults === 30" type="danger">失败</el-tag>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="sketch" label="发送结果" :show-overflow-tooltip="{ popperClass: 'max-w-[280px]' }" />
					</el-table>
					<pagination small @size-change="sizeChangeHandle3" @current-change="currentChangeHandle3" v-bind="state3.pagination" />
				</el-tab-pane>
			</el-tabs>
		</div>
	</el-dialog>
</template>

<script setup lang="ts" name="recordDialog">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchList } from '/@/api/alarm/basicNotificationRecord';
const visible = ref(false);
const tab = ref('1');
const queryRef = ref();
//  table hook
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		notificationType: 20,
	},
	pageList: fetchList,
	createdIsNeed: false,
	descs: ['create_time'],
});
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state);
const state2: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
	createdIsNeed: false,
	descs: ['create_time'],
});
const {
	getDataList: getDataList2,
	currentChangeHandle: currentChangeHandle2,
	sizeChangeHandle: sizeChangeHandle2,
	sortChangeHandle: sortChangeHandle2,
} = useTable(state2);
const state3: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchList,
	createdIsNeed: false,
	descs: ['create_time'],
});
const {
	getDataList: getDataList3,
	currentChangeHandle: currentChangeHandle3,
	sizeChangeHandle: sizeChangeHandle3,
	sortChangeHandle: sortChangeHandle3,
} = useTable(state3);

// 打开弹窗
const openDialog = (phone: string) => {
	visible.value = true;
	queryRef.value?.resetFields();
	state.queryForm.phone = phone;
	getDataList();
};
const handleChange = () => {
	switch (tab.value) {
		case '1':
			state.queryForm.notificationType = 20;
			getDataList(true);
			break;
		case '2':
			state.queryForm.notificationType = 10;
			Object.assign(state2.queryForm, state.queryForm);
			getDataList2(true);
			break;
		case '3':
			state.queryForm.notificationType = 30;
			Object.assign(state3.queryForm, state.queryForm);
			getDataList3(true);
			break;
	}
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped></style>
